<template>
	<view style="padding-bottom: 120rpx;" v-show="pageShow">
		<view class="card">
			<view class="user flexc flexs">
				<view class="left flexc">
					<image :src="avatar" mode="aspectFill"></image>
					<view class="" style="line-height: 64rpx;">
						{{username}} {{tel}}
					</view>
				</view>
				<view class="right">
					<image @click="openTel(tel)" src="@/static/icon11.svg" mode=""></image>
				</view>
			</view>

		</view>
		<reserve2 :content_list='detail' v-if='detail.order_type==4'></reserve2>

		<view class="order_details">
			<view class="card_one flexs flexc" v-if='detail.order_type<4'>
				<view class="" v-if="order_type==3">
					餐座号：{{detail.seat_no || ''}}
				</view>
				<view class="left" v-else>
					订单号：{{detail.code || ''}}
				</view>

				<view class="right">
					<text v-if="detail.status==1">待付款 </text>
					<text v-if="detail.status==2">待收货 </text>
					<text v-if="detail.status==3">已完成 </text>
					<text v-if="detail.status==4">待退款 </text>
					<text v-if="detail.status==5">已取消 </text>
					<text v-if="detail.status==6">备餐 </text>
					<text v-if="detail.status==7">出餐 </text>
					<text v-if="detail.status==8">待取单 </text>
					<text v-if="detail.status==9">已退款 </text>
					<text v-if="detail.status==10">预约中 </text>
				</view>
			</view>
			<view class="card_two flexs flexc" v-if='detail.order_type<4'>
				<view class="left">配送方式：</view>
				<view class="right" v-if="detail.order_type==1">自取</view>
				<view class="right" v-if="detail.order_type==2">外卖</view>
				<view class="right" v-if="detail.order_type==3">堂食</view>
			</view>
			<view class="card_three">
				<view class="item flexs flexc item_br">
					<view class="left">
						订单编号：
					</view>
					<view class="right">
						{{detail.order_no || ''}}
					</view>
				</view>
				<view class="item flexs flexc item_br" v-if="detail.address">
					<view class="left">
						配送地址：
					</view>
					<view class="right">
						{{detail.address}}
					</view>
				</view>

				<view class="item flexs flexc item_br" v-if="detail.subscribe_tel">
					<view class="left">
						预留手机号：
					</view>
					<view class="right">
						{{detail.subscribe_tel}}
					</view>
				</view>

				<view class="item flexs flexc item_br" v-if="detail.subscribe_tel">
					<view class="left">
						预约时间：
					</view>
					<view class="right">
						{{detail.subscribe_time | timerFormat}}
					</view>
				</view>

				<view class="item flexs flexc ">
					<view class="left">
						下单时间：
					</view>
					<view class="right">
						{{detail.createtime | timerFormat}}
					</view>
				</view>

			</view>


			<view class="card_four" v-if='detail.order_type<4'>
				<view class="title">
					商品明细
				</view>
				<view class="" :style="{'max-height': heg}" style="overflow: hidden;">
					<view class="shop flexc" v-for="item in detail.detail" :key="item">
						<image :src="item.goods_img" mode="aspectFill"></image>
						<view class="shop_item">
							<view class="flexs one">
								<view class="">{{item.goods_name}}</view>
								<view class="">¥{{item.goods_price}}</view>
							</view>
							<view class="two">
								{{item.item_name}}
							</view>
							<view class="three">
								×{{item.goods_count}}
							</view>
						</view>
					</view>
				</view>

				<view class="flexc setheg" v-if="shopList.length>1">
					<view class="" @click="setheg">
						{{poptext}}(共{{shopList.length}}件)
					</view>
					<view class="">
						<u-icon name="arrow-down" v-if="poptext=='展开'" size="28rpx"></u-icon>
						<u-icon name="arrow-up" v-else size="28rpx"></u-icon>
					</view>
				</view>
			</view>





			<view class="flexs card_five">
				<view class="left">备注：</view>
				<view class="right">{{detail.remark ||'无'}}</view>
			</view>

			<view class="card_three" v-if='detail.order_type<4'>
				<view class="item1 flexs flexc" style="border-bottom: 1rpx solid #EBEBEB;"
					v-if="detail.coupon_money!==0">
					<view class="flexc left">
						<image class="quna" src="../static/icon12.png" mode=""></image>红包/抵用券：
					</view>
					<view class="right">
						-￥{{detail.coupon_money}}
					</view>
				</view>
				<view class="item1 flexs flexc">
					<view class="one">
						共计：
					</view>
					<view class="right">
						<text class="two" v-if="detail.coupon_money!==0">已优惠￥{{detail.coupon_money}}</text><text
							class="thr">￥{{detail.order_amount_total}}</text>
					</view>
				</view>
			</view>
			<view class="card_two flexs flexc">
				<view class="left">
					支付方式:
				</view>
				<view class="right">
					{{pay_type==1?'微信':'钱包'}}
				</view>
			</view>
		</view>
		<view class="fixed flexc flexs" v-if="detail.status==4">
			<view class="btn1" @click="resold_order">
				拒绝
			</view>
			<view class="btn2" @click="refund">
				同意退款
			</view>
		</view>
		<view class="fixed flexc flexs" v-if='detail.business_status==1 && detail.status==6'>
			<view class="btn" @click="setorders">
				接单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		order_detail,
		receiving_orders,
		refund,
		resold_order
	} from '@/api/merchant.js'
	export default {
		data() {
			return {
				id: "",
				heg: '280rpx',
				poptext: "展开",
				detail: {},
				shopList: [],
				avatar: '',
				username: "",
				tel: "",
				order_type: null,
				userShow: false,
				delshow: false,
				value: 1,
				pageShow: false
			};
		},
		onLoad(e) {
			this.id = e.id
			this.avatar = e.avatar
			this.username = e.username
			this.tel = e.tel
			this.order_type = e.order_type
			this.getDetail()
		},
		methods: {
			// 退款
			async resold_order(item) {
				let res = await resold_order({
					id: this.detail.id,
				})
				if (res.code == 1) {
					this.getDetail()
					uni.$showMsg('退款成功')
				} else {
					this.getDetail()
					uni.$showMsg(res.msg)
				}
			},
			async refund(item) {
				let res = await refund({
					'order_no': this.detail.order_no,
					'tag': 1
				})
				if (res.code == 1) {
					this.getDetail()
					uni.$showMsg('退款成功')
				} else {
					this.getDetail()
					uni.$showMsg(res.msg)
				}
			},
			// 接单
			async setorders() {
				let res = await receiving_orders({
					id: this.detail.id
				})
				uni.$showMsg(res.msg)
			},
			async getDetail() {
				let res = await order_detail({
					id: this.id
				})
				if (res.code == 1) {
					this.detail = res.data
					res.data.detail.forEach(item => {
						this.shopList.push(item)
					})
					this.pageShow = true
				}

			},
			setheg() {
				if (this.poptext == '展开') {
					this.heg = ''
					this.poptext = '收起'
				} else {
					this.heg = '280rpx'
					this.poptext = '展开'
				}
			},
		}
	}
</script>

<style lang="scss">
	.minus {
		border: 1rpx solid #00ABFF;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 34rpx;
		height: 34rpx;
		background-color: #00ABFF;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		.btn {
			width: 750rpx;
			height: 120rpx;
			background: #00ABFF;
			text-align: center;
			line-height: 120rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.btn1 {
			width: 375rpx;
			height: 120rpx;
			background: #FFFFFF;
			font-size: 34rpx;
			color: #777777;
			text-align: center;
			line-height: 120rpx;
		}

		.btn2 {
			width: 375rpx;
			height: 120rpx;
			background: #00ABFF;
			font-size: 34rpx;
			color: #ffffff;
			text-align: center;
			line-height: 120rpx;
		}
	}

	.card {
		width: 100vw;
		background-color: #fff;
		padding: 25rpx 34rpx;
		box-sizing: border-box;

		.black {
			font-size: 32rpx;
			color: #333333;
		}

		.orange {
			width: 520rpx;
			font-size: 30rpx;
			color: #FF9C2E;
		}

		.user {

			.left {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				font-size: 32rpx;
				color: #333333;
			}

			.right {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}


		}
	}

	.order_details {
		padding: 25rpx 25rpx 200rpx;

		.card_one {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;

			.left {
				font-size: 40rpx;
				color: #333333;
			}

			.right {
				font-size: 34rpx;
				color: #FF9C2E;
				line-height: 50rpx;
			}
		}

		.card_two {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			margin: 20rpx 0;

			.left {
				font-size: 32rpx;
				color: #333333;
			}

			.right {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.card_three {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 14rpx 30rpx;
			margin: 20rpx 0;

			.item_br {
				border-bottom: 1rpx solid #EBEBEB;
			}

			.item1 {
				padding: 20rpx 0;
				box-sizing: border-box;
				text-align: center;

				.quna {
					width: 35rpx;
					height: 35rpx;
					margin-right: 12rpx;
				}

				.left {
					font-size: 24rpx;
					color: #333333;
				}

				.right {
					font-size: 34rpx;
					color: #FB2A57;
				}

				.one {
					font-size: 30rpx;
					color: #333333;
				}

				.two {
					font-size: 24rpx;
					color: #777777;
				}

				.thr {
					font-size: 42rpx;
					color: #333333;
				}
			}

			.item {
				padding: 20rpx 0;
				box-sizing: border-box;

				.left {
					font-size: 30rpx;
					color: #333333;
				}

				.right {
					width: 70%;
					font-size: 32rpx;
					color: #333333;
				}
			}

		}

		.card_four {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx 30rpx;
			margin: 20rpx 0;

			.title {
				font-size: 32rpx;
				border-bottom: 1rpx solid #F2F2F2;
				color: #232323;
				padding: 0 0 12rpx;
				box-sizing: border-box;

				.title_right {
					padding-top: 6rpx;
					box-sizing: border-box;

					image {
						width: 38rpx;
						height: 38rpx;
						border-radius: 50%;
					}
				}
			}

			.setheg {
				width: 150rpx;
				font-size: 20rpx;
				color: #777777;
				text-align: center;
				margin: 34rpx auto 0;
			}

			.shop {
				margin: 20rpx 0;

				image {
					width: 122rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.shop_item {
					width: 500rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
					}

					.two {
						font-size: 24rpx;
						color: #777777;
						margin: 6rpx 0;
					}

					.three {
						font-size: 24rpx;
						color: #777777;
					}
				}
			}
		}

		.card_five {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 14rpx 30rpx;
			margin: 20rpx 0;
			font-size: 32rpx;
			color: #333333;

			.right {
				width: 530rpx;
			}

		}

	}

	.userPop {
		padding: 33rpx 40rpx 170rpx;
		box-sizing: border-box;

		.userPop_title {}

		.userPop_ipts {
			margin-top: 38rpx;
			font-size: 32rpx;
		}

		.userPop_ipt {
			border-bottom: 1rpx solid #EBEBEB;
			padding-bottom: 6rpx;

			input {
				width: 221rpx;
			}
		}
	}

	.delPop {
		padding: 70rpx 98rpx;
		box-sizing: border-box;

		.delPop_title {
			font-size: 40rpx;
			color: #232323;
			font-weight: 700;
		}

		.delpop_btns {
			margin-top: 76rpx;

			.delpop_qx_btn {
				width: 183rpx;
				height: 64rpx;
				background: #D8D8D8;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

			.delpop_qd_btn {
				width: 183rpx;
				height: 64rpx;
				background: #00ABFF;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

		}
	}
</style>